<template>
  <view class="u-keyboard" @touchmove.stop.prevent="() => {}">
    <view class="u-keyboard-grids">
      <view class="u-keyboard-grids-item" v-for="(group, i) in abc ? EngKeyBoardList : areaList" :key="i">
        <view
          :hover-stay-time="100"
          @touchstart="carInputClick(i, j)"
          hover-class="u-carinput-hover"
          class="u-keyboard-grids-btn"
          v-for="(item, j) in group"
          :key="j"
        >
          {{ item }}
        </view>
      </view>
      <view @touchstart="backspaceClick" @touchend="clearTimer" :hover-stay-time="100" class="u-keyboard-back" hover-class="u-hover-class">
        <u-icon :size="38" name="backspace" :bold="true"></u-icon>
      </view>
      <view :hover-stay-time="100" class="u-keyboard-change" hover-class="u-carinput-hover" @click="changeCarInputMode">
        <text class="zh" :class="[!abc ? 'active' : 'inactive']">中</text>
        /
        <text class="en" :class="[abc ? 'active' : 'inactive']">英</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'u-keyboard',
  emits: ['change', 'backspace'],
  props: {
    // 是否打乱键盘按键的顺序
    random: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 车牌输入时，abc=true为输入车牌号码，bac=false为输入省份中文简称
      abc: false
    }
  },
  computed: {
    areaList() {
      let data = [
        '京',
        '沪',
        '粤',
        '津',
        '冀',
        '豫',
        '云',
        '辽',
        '黑',
        '湘',
        '皖',
        '鲁',
        '苏',
        '浙',
        '赣',
        '鄂',
        '桂',
        '甘',
        '晋',
        '陕',
        '蒙',
        '吉',
        '闽',
        '贵',
        '渝',
        '川',
        '青',
        '琼',
        '宁',
        '挂',
        '藏',
        '港',
        '澳',
        '新',
        '使',
        '学'
      ]
      let tmp = []
      // 打乱顺序
      if (this.random) data = this.$u.randomArray(data)
      // 切割成二维数组
      tmp[0] = data.slice(0, 10)
      tmp[1] = data.slice(10, 20)
      tmp[2] = data.slice(20, 30)
      tmp[3] = data.slice(30, 36)
      return tmp
    },
    EngKeyBoardList() {
      let data = [
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        0,
        'Q',
        'W',
        'E',
        'R',
        'T',
        'Y',
        'U',
        'I',
        'O',
        'P',
        'A',
        'S',
        'D',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'Z',
        'X',
        'C',
        'V',
        'B',
        'N',
        'M'
      ]
      let tmp = []
      if (this.random) data = this.$u.randomArray(data)
      tmp[0] = data.slice(0, 10)
      tmp[1] = data.slice(10, 20)
      tmp[2] = data.slice(20, 30)
      tmp[3] = data.slice(30, 36)
      return tmp
    }
  },
  methods: {
    // 点击键盘按钮
    carInputClick(i, j) {
      let value = ''
      // 不同模式，获取不同数组的值
      if (this.abc) value = this.EngKeyBoardList[i][j]
      else value = this.areaList[i][j]
      if (!this.abc) this.abc = true
      this.$emit('change', value)
      if (this.vibrate) uni.vibrateShort()
    },
    // 修改汽车牌键盘的输入模式，中文|英文
    changeCarInputMode() {
      this.abc = !this.abc
    },
    // 修改汽车牌键盘的输入模式，中文|英文
    updateCarInputMode(abc) {
      this.abc = abc
    },
    // 点击退格键
    backspaceClick() {
      let count = 1
      this.backspaceFn(count)
      clearInterval(this.timer) //再次清空定时器，防止重复注册定时器
      this.timer = null
      this.timer = setInterval(() => {
        count++
        this.backspaceFn(count)
      }, 250)
    },
    backspaceFn(count) {
      this.$emit('backspace', count)
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-keyboard-grids {
  background: rgb(215, 215, 217);
  padding: 24rpx 0;
  position: relative;
}

.u-keyboard-grids-item {
  @include vue-flex;
  align-items: center;
  justify-content: center;
}

.u-keyboard-grids-btn {
  text-decoration: none;
  width: 62rpx;
  flex: 0 0 64rpx;
  height: 80rpx;
  /* #ifndef APP-NVUE */
  display: inline-flex;
  /* #endif */
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
  background-color: #fff;
  margin: 8rpx 5rpx;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 0rpx #888992;
  font-weight: 500;
  justify-content: center;
}

.u-carinput-hover {
  background-color: rgb(185, 188, 195) !important;
}

.u-keyboard-back {
  position: absolute;
  width: 96rpx;
  right: 22rpx;
  bottom: 32rpx;
  height: 80rpx;
  background-color: rgb(185, 188, 195);
  @include vue-flex;
  align-items: center;
  border-radius: 8rpx;
  justify-content: center;
  box-shadow: 0 2rpx 0rpx #888992;
}

.u-keyboard-change {
  font-size: 24rpx;
  box-shadow: 0 2rpx 0rpx #888992;
  position: absolute;
  width: 96rpx;
  left: 22rpx;
  line-height: 1;
  bottom: 32rpx;
  height: 80rpx;
  background-color: #ffffff;
  @include vue-flex;
  align-items: center;
  border-radius: 8rpx;
  justify-content: center;
}

.u-keyboard-change .inactive.zh {
  transform: scale(0.85) translateY(-10rpx);
}

.u-keyboard-change .inactive.en {
  transform: scale(0.85) translateY(10rpx);
}

.u-keyboard-change .active {
  color: rgb(237, 112, 64);
  font-size: 30rpx;
}

.u-keyboard-change .zh {
  transform: translateY(-10rpx);
}

.u-keyboard-change .en {
  transform: translateY(10rpx);
}
</style>
